<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <th:block th:include="include :: header('发布活动信息列表')" />
</head>

<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <!--    搜索块 -->
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <p>活动编号：</p>
                            <input type="text" name="activityId"/>
                        </li>

                        <li>
                            <p>活动名称：</p>
                            <input type="text" name="activityName"/>
                        </li>

                        <li>
                            <p>活动类型：</p>
                            <select name="TypeName">
                                <option value="">所有</option>
                            </select>
                        </li>

                        <li>
                            <p>状态：</p>
                            <select name="activityState" >
                                <option value="">所有</option>
                            </select>
                        </li>

<!--                         招募时间搜索框 -->
                        <li class="select-time">
                            <p>招募时间：</p>
                            <input type="text" class="time-input" id="startTime" style="width: 133px" placeholder="请选择开始时间" name=""/>
                            <span>至</span>
                            <input type="text" class="time-input" id="endTime" style="width: 133px" placeholder="请选择结束时间" name=""/>
                        </li>

<!--                        活动时间搜索框-->
                        <li class="select-time">
                            <p>活动时间：</p>
                            <input type="text" class="time-input" id="startTime1" style="width: 133px" placeholder="请选择开始时间" name="activityBegin"/>
                            <span>至</span>
                            <input type="text" class="time-input" id="endTime1" style="width: 133px" placeholder="请选择结束时间" name="activityEnd"/>
                        </li>

<!--                        搜索按钮-->
                        <li>
                            <a class="btn btn-success btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
<!--                            <a class="btn btn-warning btn-sm" onclick="reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>-->
                        </li>

                    </ul>
                </div>
                <!--    额外搜索条件   -->
                <input name="activityState" id="activityState" type="hidden" value="-1"/>
            </form>
        </div>



        <!--   功能模块    -->
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.add()">
                <i class="fa fa-plus"></i> 新增活动
            </a>
            <a class="btn btn-success multiple" onclick="publish()">
                <i class="fa fa-plus"></i> 发布活动
            </a>
            <a class="btn btn-info" onclick="$.table.importExcel()" shiro:hasPermission="vtsp:activity:import">
                <i class="fa fa-upload"></i> 导入
            </a>
            </br>
            <a class="btn btn-white" onclick="published()">未结项</a>
            <a class="btn btn-white" onclick="ended()">已结项</a>
        </div>

        <!--    主界面表格 -->
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table">
                <thead>
                <tr>
                    <th data-checkbox="true"></th>
                    <th data-formatter="fm_rowIndex" data-align="center">活动编号</th>
                    <th data-field="activityName">活动名称</th>
                    <th data-field="typeName">活动类别</th>
                    <th data-field="activityContact">联系人</th>
                    <th data-field="enrollBegin">招募时间</th>
                    <th data-field="activityBegin">活动时间</th>
                    <th data-field="activityArea">活动区域</th>
                    <th data-field="serveTime">服务时长</th>
                    <th data-field="isEnroll"data-formatter="fm_is_enroll">是否需要报名</th>
                    <th data-field="activityState" data-formatter="fm_activityState">状态</th>
                    <th data-formatter="fm_commands" data-width="220px" data-align="center">操作</th>
                </tr>
                </thead>
            </table>
        </div>

    </div>
</div>

<th:block th:include="include :: footer" />

<!--    JS  -->
<script th:inline="javascript">
    //  操作
    var showFlag = [[${@permission.hasPermi('vtsp:publish:show')}]];
    var activityStateDatas = [[${@dict.getType('activity_state')}]];
    //  前缀
    var prefix = ctx + "vtsp/publish";

    $(function(){
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            importTemplateUrl: prefix + "/importTemplate",
            importUrl: prefix + "/importList",
            exportUrl: prefix + "/export",
            modalName: "活动信息",
            uniqueId: "activityId"
        };
        $.table.init(options);
    });

    //命令
    function fm_commands(value, row, index){
        var actions = [];
        let arr=[1,2]
      if (arr.includes(row.activityState)) {
        actions.push('<a class="btn btn-success btn-xs published ' + showFlag + '" href="javascript:void(0)" onclick="toEnroll(\'' + row.activityId + '\')">报名情况</a> ');
        actions.push('<a class="btn btn-success btn-xs published ' + showFlag + '" href="javascript:void(0)" onclick="recipient(\'' + row.activityId + '\')">服务对象</a> ');
        actions.push('<a class="btn btn-success btn-xs published ' + showFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.activityId + '\')">编辑</a> ');
        actions.push('<a class="btn btn-success btn-xs published ' + showFlag + '" href="javascript:void(0)" onclick="end(\'' + row.activityId + '\')">结项</a> ');
      } else if (row.activityState === 6) {
        actions.push('<a class="btn btn-success btn-xs ended ' + showFlag + '" href="javascript:void(0)" onclick="appraise(\'' + row.activityId + '\')">评价志愿者</a> ');
        actions.push('<a class="btn btn-success btn-xs ended ' + showFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.activityId + '\')">编辑</a> ');
        // actions.push('<a class="btn btn-success btn-xs ended ' + showFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.activityId + '\')">删除</a> ');
      } else if (row.activityState === 4) {
          actions.push('<a class="btn btn-success btn-xs ended ' + showFlag + '" href="javascript:void(0)" onclick="undo(\'' + row.activityId + '\')">恢复</a> ');
          // actions.push('<a class="btn btn-success btn-xs ended ' + showFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.activityId + '\')">删除</a> ');
      }else {
        actions.push('<a class="btn btn-success btn-xs ended ' + showFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.activityId + '\')">编辑</a> ');
        // actions.push('<a class="btn btn-success btn-xs ended ' + showFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.activityId + '\')">删除</a> ');
      }
        return actions.join('');
    }

    function appraise(id) {
        var url = prefix + '/appraise/' + id;
        $.modal.openTab("评价志愿者", url);
    }

    function undo(activityId){
        let url = ctx + "vtsp/activity/edit";
        let data = { "activityId" : activityId, "activityState": 1};
        $.operate.post(url, data);
    }

    function recipient(id) {
        var url = prefix + '/recipient/' + id;
        $.modal.openTab("服务对象", url);
    }

    function publish() {
        let rows = $('#bootstrap-table').bootstrapTable('getSelections');
        let idArr = [];
        for (let i = 0; i < rows.length; i++) {
            idArr[i] = rows[i].activityId;
        }
        $.modal.confirm("确定发布此活动吗？",function () {
            let ids = idArr.join(",");
            let data = { "ids": ids};
            $.operate.post(prefix + '/publish', data)
        });
    }

    function published() {
        let node = document.getElementById("activityState");
        node.setAttribute("value", "-1");
        $.table.search();
    }

    function ended() {
        let node = document.getElementById("activityState");
        node.setAttribute("value", "-2");
        $.table.search();
    }

    function toEnroll(id) {
        var url = prefix + '/toEnroll/' + id;
        $.modal.openTab("报名情况", url);
    }

    //活动状态
    function fm_activityState(value, row, index) {
        return $.table.selectDictLabel(activityStateDatas, value);
    }

    //  是否需要报名字典数据
    let is_enroll_dict = [[${@dict.getType('is_enroll')}]];
    //  根据字典的格式转化器
    function fm_is_enroll(value, row ,index) {
        return $.table.selectDictLabel(is_enroll_dict, value);
    }

    //  查询未通过的信息
    function selectFailApproval() {
        let node = document.getElementById("activityState");
        node.setAttribute("value", "3");
        $.table.search();
    }

    function reset() {
        let node = document.getElementById("activityState");
        node.setAttribute("value", "");
        $.form.reset();
    }

    function end(id) {
        var url = prefix + '/end/' + id;
        $.modal.open("活动结项", url);
    }


    /** 弹窗相关事件 */
    //  操作的查看弹窗
    function showModal(id) {
        let modal = document.getElementById("modal");
        modal.style.display = "block";
    }

    function closeModal() {
        let modal = document.getElementById("modal");
        modal.style.display = "none";
    }

</script>
</body>
<!-- 导入区域 -->
<script id="importTpl" type="text/template">
    <form enctype="multipart/form-data" class="mt20 mb10">
        <div class="col-xs-offset-1">
            <input type="file" id="file" name="file"/>
            <div class="mt10 pt5">
                &nbsp;	<a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
            </div>
            <font color="red" class="pull-left mt10">
                提示：仅允许导入“xls”或“xlsx”格式文件！
            </font>
        </div>
    </form>
</script>
</html>
